<template>
  <view>
    <view>
      <view class="content">
        <view>基本信息</view>
        <view>
          <text>姓名：</text>
          <input type="text" v-model="trueName" placeholder="请输入姓名" />
        </view>
        <view>
          <text>身份证：</text>
          <input
            type="text"
            maxlength="18"
            v-model="identityNumber"
            placeholder="请输入身份证"
          />
        </view>
        <view>
          <text>手机号：</text>
          <input
            type="text"
            maxlength="11"
            v-model="mobile"
            placeholder="请输入手机号"
          />
        </view>
        <view>
          <text>车牌号：</text>
          <input type="text" v-model="carNumber" placeholder="请输入车牌号" />
        </view>
      </view>
      <view class="middle">
        <view class="middle_top">
          <view>身份认证</view>
        </view>
        <view class="middle_key"><text>*</text>上传身份证</view>
        <view class="middle_box">
          <view class="uploada" @click="addImagea()">
            <!-- <image src="../../static/iocn37.png" v-if="src == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' || src == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/undefined'"></image> -->
            <image :src="src"></image>
          </view>
          <view class="uploada1" @click="addImageb()">
            <!-- <image src="../../static/iocn38.png" v-if="src1 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' || src1 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/undefined'"></image> -->
            <image :src="src1"></image>
          </view>
        </view>
      </view>
      <view class="middle">
        <view class="middle_key"><text>*</text>上传行驶证</view>
        <view class="middle_box">
          <view class="uploada2" @click="xingshiaddImagea()">
            <!-- <image src="../../static/iocn37.png" v-if="src2 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' || src2 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/undefined'"></image> -->
            <image :src="src2"></image>
          </view>
          <view class="uploada3" @click="xingshiaddImageb()">
            <!-- 	<image src="../../static/iocn38.png" v-if="src3 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' || src3 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/undefined'"></image> -->
            <image :src="src3"></image>
          </view>
        </view>
      </view>
      <view class="middle">
        <view class="middle_key"><text>*</text>上传驾驶证</view>
        <view class="middle_box">
          <view class="uploada4" @click="jiashiaddImagea()">
            <!-- <image src="../../static/iocn37.png" v-if="src4 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' || src4 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/undefined'"></image> -->
            <image :src="src4"></image>
          </view>
          <view class="uploada5" @click="jiashiaddImageb()">
            <!-- <image src="../../static/iocn38.png" v-if="src5 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' || src5 == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/undefined'"></image> -->
            <image :src="src5"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="container">
      <view class="container_top">
        <view>身份认证</view>
      </view>
      <view class="container_box">
        <view>
          <text>提现账户</text>
          <input
            type="text"
            maxlength="19"
            v-model="bankName"
            placeholder="请输入银行卡号"
          />
        </view>
      </view>
      <view class="container_box">
        <view>
          <text>支行名称</text>
          <input
            type="text"
            v-model="bankAccount"
            placeholder="请输入支行名称"
          />
        </view>
      </view>
    </view>

    <view class="primary">
      <view class="primary_top">
        请确保身份证、行驶证,驾驶证照片不会出现遮挡、拍摄不全、画面不清晰、证件号码不一致等情况
      </view>
      <view class="primary_key">
        <image src="../../static/iocn25.png"></image>
        <text>我已阅读并同意《货物运输协议》</text>
      </view>
      <view class="primary_box" :disabled="disabled" @click="DriverCA()"
        >确认提交</view
      >
    </view>
    <view v-show="jiazaizhong" class="view_nav">
      <u-loading-icon></u-loading-icon>
    </view>
  </view>
</template>

<script>
import { DriverCA, GetUserById } from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
export default {
  data() {
    return {
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      disabled: false,
      value: false,
      trueName: "",
      identityNumber: "",
      carNumber: "",
      mobile: "",
      company: "",
      driveLicence: "",
      driveLicence2: "",
      vehicleLicense: "",
      vehicleLicense2: "",

      src: "", // 上传身份证 -- 国徽面
      src1: "", // 上传身份证 -- 人像面
      src2: "", // 上传行驶证--正面
      src3: "", // 上传行驶证--反面
      src4: "", // 上传驾驶证--正面
      src5: "", // 上传驾驶证--反面

      srcv: "", // 上传身份证 -- 国徽面
      src1v: "", // 上传身份证 -- 人像面
      src2v: "", // 上传行驶证--正面
      src3v: "", // 上传行驶证--反面
      src4v: "", // 上传驾驶证--正面
      src5v: "", // 上传驾驶证--反面

      bankName: "",
      bankAccount: "",
      jiazaizhong: false,
    };
  },
  onLoad() {
    this.GetUserById();
  },

  methods: {
    // 上传身份证 -- 国徽面
    addImagea() {
      var that = this;
      // let token = getValue('token')
      console.log(123);
      // 从本地相册选择图片或使用相机拍照。
      uni.chooseImage({
        count: 10, //最多可以选择的图片张数，默认9
        //album 从相册选图，camera 使用相机，默认二者都有。
        sourceType: ["album"],
        success: function (res) {
          //获取图片信息。
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (image) {
              that.jiazaizhong = true;
              // that.src = (res.tempFilePaths[0]);
              // console.log(that.src); //打印出图片信息,在浏览器上打开就是你上传的图片
              //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
              uni.uploadFile({
                //开发者服务器 url
                url: "https://api.syh56.com:21026/api/UploadOSS",
                //获取要上传文件资源的路径。
                // filePath: res.tempFilePaths[0],
                filePath: res.tempFilePaths[0],
                //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
                name: "files",
                //HTTP 请求 Header, header 中不能设置 Referer。
                header: {
                  "Abp.TenantId": "1",
                  "content-type": "multipart/form-data",
                },
                //成功的回调fullurl
                success: (uploadFileRes) => {
                  console.log(uploadFileRes);
                  //获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
                  var res1 = JSON.parse(uploadFileRes.data);
                  that.srcv = res1.result;
                  that.src = res.tempFilePaths[0];
                  that.jiazaizhong = false;
                },
              });
            },
          });
        },
      });
    },

    // 上传身份证 -- 人像面
    addImageb() {
      var that = this;
      // let token = getValue('token')
      console.log(123);
      // 从本地相册选择图片或使用相机拍照。
      uni.chooseImage({
        count: 10, //最多可以选择的图片张数，默认9
        //album 从相册选图，camera 使用相机，默认二者都有。
        sourceType: ["album"],
        success: function (res) {
          //获取图片信息。
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (image) {
              that.jiazaizhong = true;
              //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
              uni.uploadFile({
                //开发者服务器 url
                url: "https://api.syh56.com:21026/api/UploadOSS",
                //获取要上传文件资源的路径。
                // filePath: res.tempFilePaths[0],
                filePath: res.tempFilePaths[0],
                //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
                name: "files",
                //HTTP 请求 Header, header 中不能设置 Referer。
                header: {
                  "Abp.TenantId": "1",
                },
                //成功的回调fullurl
                success: (uploadFileRes) => {
                  console.log(uploadFileRes);
                  //获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
                  var res1 = JSON.parse(uploadFileRes.data);
                  that.src1v = res1.result;
                  that.src1 = res.tempFilePaths[0];
                  that.jiazaizhong = false;
                },
              });
            },
          });
        },
      });
    },

    // 上传行驶证-- 正面
    xingshiaddImagea() {
      var that = this;
      // let token = getValue('token')
      console.log(123);
      // 从本地相册选择图片或使用相机拍照。
      uni.chooseImage({
        count: 10, //最多可以选择的图片张数，默认9
        //album 从相册选图，camera 使用相机，默认二者都有。
        sourceType: ["album"],
        success: function (res) {
          //获取图片信息。
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (image) {
              that.jiazaizhong = true;
              //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
              uni.uploadFile({
                //开发者服务器 url
                url: "https://api.syh56.com:21026/api/UploadOSS",
                //获取要上传文件资源的路径。
                // filePath: res.tempFilePaths[0],
                filePath: res.tempFilePaths[0],
                //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
                name: "files",
                //HTTP 请求 Header, header 中不能设置 Referer。
                header: {
                  "Abp.TenantId": "1",
                },
                //成功的回调fullurl
                success: (uploadFileRes) => {
                  console.log(uploadFileRes);
                  //获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
                  var res1 = JSON.parse(uploadFileRes.data);
                  that.src2v = res1.result;
                  that.src2 = res.tempFilePaths[0];
                  console.log(that.src2);
                  that.jiazaizhong = false;
                },
              });
            },
          });
        },
      });
    },

    // 上传行驶证-- 反面
    xingshiaddImageb() {
      var that = this;
      // let token = getValue('token')
      console.log(123);
      // 从本地相册选择图片或使用相机拍照。
      uni.chooseImage({
        count: 10, //最多可以选择的图片张数，默认9
        //album 从相册选图，camera 使用相机，默认二者都有。
        sourceType: ["album"],
        success: function (res) {
          //获取图片信息。
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (image) {
              that.jiazaizhong = true;
              //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
              uni.uploadFile({
                //开发者服务器 url
                url: "https://api.syh56.com:21026/api/UploadOSS",
                //获取要上传文件资源的路径。
                // filePath: res.tempFilePaths[0],
                filePath: res.tempFilePaths[0],
                //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
                name: "files",
                //HTTP 请求 Header, header 中不能设置 Referer。
                header: {
                  "Abp.TenantId": "1",
                },
                //成功的回调fullurl
                success: (uploadFileRes) => {
                  console.log(uploadFileRes);
                  //获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
                  var res1 = JSON.parse(uploadFileRes.data);
                  that.src3v = res1.result;
                  that.src3 = res.tempFilePaths[0];
                  that.jiazaizhong = false;
                },
              });
            },
          });
        },
      });
    },

    // 上传驾驶证-- 正面
    jiashiaddImagea() {
      var that = this;
      // let token = getValue('token')
      console.log(123);
      // 从本地相册选择图片或使用相机拍照。
      uni.chooseImage({
        count: 10, //最多可以选择的图片张数，默认9
        //album 从相册选图，camera 使用相机，默认二者都有。
        sourceType: ["album"],
        success: function (res) {
          //获取图片信息。
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (image) {
              that.jiazaizhong = true;
              //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
              uni.uploadFile({
                //开发者服务器 url
                url: "https://api.syh56.com:21026/api/UploadOSS",
                //获取要上传文件资源的路径。
                // filePath: res.tempFilePaths[0],
                filePath: res.tempFilePaths[0],
                //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
                name: "files",
                //HTTP 请求 Header, header 中不能设置 Referer。
                header: {
                  "Abp.TenantId": "1",
                },
                //成功的回调fullurl
                success: (uploadFileRes) => {
                  console.log(uploadFileRes);
                  //获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
                  var res1 = JSON.parse(uploadFileRes.data);
                  that.src4v = res1.result;
                  that.src4 = res.tempFilePaths[0];
                  console.log(that.src4);
                  that.jiazaizhong = false;
                },
              });
            },
          });
        },
      });
    },

    // 上传驾驶证-- 反面面
    jiashiaddImageb() {
      var that = this;
      // let token = getValue('token')
      console.log(123);
      // 从本地相册选择图片或使用相机拍照。
      uni.chooseImage({
        count: 10, //最多可以选择的图片张数，默认9
        //album 从相册选图，camera 使用相机，默认二者都有。
        sourceType: ["album"],
        success: function (res) {
          //获取图片信息。
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (image) {
              that.jiazaizhong = true;
              //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
              uni.uploadFile({
                //开发者服务器 url
                url: "https://api.syh56.com:21026/api/UploadOSS",
                //获取要上传文件资源的路径。
                // filePath: res.tempFilePaths[0],
                filePath: res.tempFilePaths[0],
                //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
                name: "files",
                //HTTP 请求 Header, header 中不能设置 Referer。
                header: {
                  "Abp.TenantId": "1",
                },
                //成功的回调fullurl
                success: (uploadFileRes) => {
                  console.log(uploadFileRes);
                  //获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
                  var res1 = JSON.parse(uploadFileRes.data);
                  console.log(res1);
                  that.src5v = res1.result;
                  that.src5 = res.tempFilePaths[0];

                  that.jiazaizhong = false;
                },
              });
            },
          });
        },
      });
    },

    change(e) {
      this.value = e;
    },

    async DriverCA() {
      var id = getValue("id");
      var carNumber = this.carNumber;
      var trueName = this.trueName;
      var identityNumber = this.identityNumber;
      var idNumberPic = this.srcv;
      var idNumberPic2 = this.src1v;
      var bankName = this.bankName;
      var bankAccount = this.bankAccount;
      var vehicleLicense = this.src2v;
      var vehicleLicense2 = this.src3v;
      var driveLicence = this.src4v;
      var driveLicence2 = this.src5v;
      // 个人
      var mobile = this.mobile;
      if (trueName == "null" || trueName == "") {
        uni.showToast({
          title: "姓名不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (carNumber == "null" || carNumber == "") {
        uni.showToast({
          title: "车牌号不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (mobile == "null" || mobile == "") {
        uni.showToast({
          title: "手机号不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (identityNumber == "null" || identityNumber == "") {
        uni.showToast({
          title: "身份证不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (idNumberPic == "null" || idNumberPic == "") {
        uni.showToast({
          title: "身份证国徽面不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (idNumberPic2 == "null" || idNumberPic2 == "") {
        uni.showToast({
          title: "身份证人像面不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (vehicleLicense == "null" || vehicleLicense == "") {
        uni.showToast({
          title: "行驶证正面不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (vehicleLicense2 == "null" || vehicleLicense2 == "") {
        uni.showToast({
          title: "行驶证反面不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (driveLicence == "null" || driveLicence == "") {
        uni.showToast({
          title: "驾驶证正面不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (driveLicence2 == "null" || driveLicence2 == "") {
        uni.showToast({
          title: "驾驶证反面不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }

      if (bankName == "null" || bankName == "") {
        uni.showToast({
          title: "银行卡号不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (bankAccount == "null" || bankAccount == "") {
        uni.showToast({
          title: "支行名称不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      // return false
      try {
        const { data: res } = await DriverCA({
          id,
          carNumber,
          trueName,
          identityNumber,
          idNumberPic,
          idNumberPic2,
          bankName,
          mobile,
          bankAccount,
          driveLicence,
          driveLicence2,
          vehicleLicense,
          vehicleLicense2,
        });
        if (res.result.success == false) {
          uni.showToast({
            title: `${res.result.message}`,
            icon: "none",
            duration: 2000,
          });
        } else {
          uni.showToast({
            title: "提交成功",
            icon: "none",
            duration: 2000,
          });
          this.disabled = true;
          setValue("approved", true);
          setTimeout(function () {
            uni.reLaunch({
              url: "/pages/PersonalCenter/sjindex",
            });
          }, 600);
        }
      } catch (e) {}
    },
    // 获取用户详情
    async GetUserById() {
      var id = getValue("id");
      try {
        const { data: res } = await GetUserById({
          id,
        });
        if (res.result.approved == true) {
          this.disabled = true;
        }

        console.log("123123", res);
        this.trueName = res.result.trueName;
        this.identityNumber = res.result.identityNumber;
        this.mobile = res.result.mobile;
        this.bankName = res.result.bankName;
        this.bankAccount = res.result.bankAccount;
        this.carNumber = res.result.carNumber;
        this.srcv = res.result.idNumberPic;
        this.src1v = res.result.idNumberPic2;
        this.src2v = res.result.vehicleLicense;
        this.src3v = res.result.vehicleLicense2;
        this.src4v = res.result.driveLicence;
        this.src5v = res.result.driveLicence2;
        this.src = "https://syh-1.oss-cn-shanghai.aliyuncs.com/" + this.srcv;
        this.src1 = "https://syh-1.oss-cn-shanghai.aliyuncs.com/" + this.src1v;
        this.src2 = "https://syh-1.oss-cn-shanghai.aliyuncs.com/" + this.src2v;
        this.src3 = "https://syh-1.oss-cn-shanghai.aliyuncs.com/" + this.src3v;
        this.src4 = "https://syh-1.oss-cn-shanghai.aliyuncs.com/" + this.src4v;
        this.src5 = "https://syh-1.oss-cn-shanghai.aliyuncs.com/" + this.src5v;
      } catch (e) {}
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  padding: 0 15upx;
}

.boxt_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25upx;
  background-color: #fff;
  margin-top: 20upx;
}

.content {
  margin-top: 20upx;
  border-radius: 17.52upx;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  padding: 0 25upx;
  background-color: #fff;

  view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80upx;
    border-bottom: 1upx solid #e5e5e5;
    font-size: 32upx;
    font-weight: bold;
    padding: 0 15upx;

    text {
      // color: #EF4D3D;
      // padding-right: 10upx;
    }
  }

  input {
    display: block;
    font-size: 25upx;
    text-align: right;
    width: 450upx;
    font-weight: 400;
  }
}

.middle {
  margin-top: 20upx;
  border-radius: 17.52upx;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  padding: 30upx 25upx;
  background-color: #fff;

  .middle_top {
    padding-bottom: 30upx;
    border-bottom: 2upx solid #e5e5e5;

    view {
      width: 170upx;
      height: 54upx;
      border-radius: 10upx;
      background-color: #ef4d3d;
      text-align: center;
      line-height: 54upx;
      color: #fff;
      font-weight: bold;
      font-size: 31upx;
      font-weight: bold;
    }
  }

  .middle_key {
    display: flex;
    align-items: center;
    font-size: 32upx;
    font-weight: bold;
    padding-top: 25upx;

    text {
      color: #ef4d3d;
      padding-right: 10upx;
    }
  }

  .middle_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 28upx;

    .uploada {
      background: url("@/static/iocn37.png") no-repeat;
      background-size: 300upx 162upx;
    }

    .uploada1 {
      background: url("@/static/iocn38.png") no-repeat;
      background-size: 300upx 162upx;
    }

    .uploada2 {
      background: url("https://syh-2.oss-cn-shanghai.aliyuncs.com/xingshiz1.jpg")
        no-repeat;
      background-size: 300upx 162upx;
    }

    .uploada3 {
      background: url("https://syh-2.oss-cn-shanghai.aliyuncs.com/jiashiz2.jpg")
        no-repeat;
      background-size: 300upx 162upx;
    }

    .uploada4 {
      background: url("https://syh-2.oss-cn-shanghai.aliyuncs.com/xingshiz1.jpg")
        no-repeat;
      background-size: 300upx 162upx;
    }

    .uploada5 {
      background: url("https://syh-2.oss-cn-shanghai.aliyuncs.com/xingshiz2.jpg")
        no-repeat;
      background-size: 300upx 162upx;
    }

    image {
      width: 305upx;
      height: 168upx;
    }
  }
}

.container {
  margin-top: 20upx;
  border-radius: 17.52upx;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  padding: 0 25upx;
  background-color: #fff;

  .container_top {
    padding: 30upx 0;

    view {
      width: 170upx;
      height: 54upx;
      border-radius: 10upx;
      background-color: #ef4d3d;
      text-align: center;
      line-height: 54upx;
      color: #fff;
      font-weight: bold;
      font-size: 31upx;
      font-weight: bold;
    }
  }

  .container_box {
    view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90upx;
      border-top: 2upx solid #e5e5e5;

      text {
        font-size: 28upx;
        font-weight: bold;
      }

      input {
        width: 400upx;
        font-size: 24upx;
        text-align: right;
      }
    }
  }
}

.primary {
  padding-top: 140upx;
  padding-bottom: 50upx;

  .primary_top {
    font-size: 24upx;
    text-align: center;
    color: #383838;
    line-height: 40upx;
  }

  .primary_key {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30upx;

    image {
      width: 28upx;
      height: 28upx;
    }

    text {
      font-size: 24upx;
      font-weight: bold;
      padding-left: 25upx;
    }
  }

  .primary_box {
    width: 436upx;
    height: 72upx;
    border-radius: 20upx;
    text-align: center;
    line-height: 72upx;
    background-color: #ef4d3d;
    font-size: 38upx;
    color: #fff;
    font-weight: bold;
    margin: 0 auto;
    margin-top: 45upx;
  }
}

.view_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  // v-show="jiazaizhong"
  display: flex;
  align-items: center;
  justify-content: center;
  // view{
  // 	display: flex;
  // 	align-items: center;
  // 	justify-content: center;
  // 	position: absolute;
  // 	top: 50%;
  // 	left: 50%;
  // 	transform: translate(-50%, -50%);
  // }
}
</style>
